<template>
  <div class="category">
    <div class="img-wrapper">
      <img
          src="https://p3-sign.toutiaoimg.com/tos-cn-i-axegupay5k/e62fecf27b6046d0a07b2889ae6f4f7f~tplv-tt-large.image?_iz=30575&lk3s=06827d14&x-expires=1717557855&x-signature=JHFdAX6jm8YaQQYNQlxNqQBtuhI%3D"
          alt="">
    </div>
    <div class="category-btn-wrapper">
      <div class="btn" v-for="(btn, index) of btns"
           :class="{'active': index == btnIndex}"
           @click="handleClick(index)">
        {{btn.text}}
      </div>
<!--      <div class="btn">社会</div>-->
<!--      <div class="btn">国内</div>-->
<!--      <div class="btn">国际</div>-->
<!--      <div class="btn">娱乐</div>-->
<!--      <div class="btn">体育</div>-->
<!--      <div class="btn">军事</div>-->
<!--      <div class="btn">科技</div>-->
<!--      <div class="btn">财经</div>-->
<!--      <div class="btn">时尚</div>-->
    </div>


<!--    <div class="category-btn-wrapper">-->
<!--      <div class="btn" v-for="(btn, index) of btns"-->
<!--           :class="{'active': index == btnIndex}"-->
<!--           @click="handleClick(index)">{{ btn.text }}-->
<!--      </div>-->
<!--    </div>-->

    <div class="content-wrapper">
      <div class="item" v-for="t of news">
        <div class="left">
          <img :src="t.thumbnail_pic_s" alt="">
        </div>
        <div class="right">
          <h1 class="title">{{ t.title }}</h1>
          <div class="text-wrapper">
            <span class="category-text">{{ t.category }}</span>
            <span class="date-text">{{ t.date }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import axios from "axios";
import index from "vuex";

export default {
  name:"category_news",
  // computed: {
  //   index() {
  //     return index
  //   }
  // },
  data(){
    return{
      news: [],
      // '社会','国内','国际',
      // '娱乐','体育','军事','科技','财经','时尚'
      btns: [
        {
          text: '社会',
          paramText: 'shehui'
        },
        {
          text: '国内',
          paramText: 'guonei'
        },
        {
          text: '国际',
          paramText: 'guoji'
        },
        {
          text: '娱乐',
          paramText: 'yule'
        },
        {
          text: '体育',
          paramText: 'tiyu'
        },
        {
          text: '军事',
          paramText: 'junshi'
        },
        {
          text: '科技',
          paramText: 'keji'
        },
        {
          text: '财经',
          paramText: 'caijing'
        },
        {
          text: '时尚',
          paramText: 'shishang'
        }
      ],
      btnIndex:0
    }
  },
  methods: {
    handleClick(index){
      if (this.btnIndex != index){
        this.btnIndex = index
        this._initNews()
      }
    },
    _initNews(){
      axios.get('/juheNews', {
        params:
            {key: "4135b84f2fb1c6331132def3a993bfdf",
            type: this.btns[this.btnIndex].paramText
            }
        // 4135b84f2fb1c6331132def3a993bfdf
      }).then(res => {
        if (res.data.error_code == 0) {
          this.news = res.data.result.data;
          console.log(this.news)
        } else {
          alert('请求失败')
        }
      })
    }
  },
  created() {
    this._initNews()
  }

}
</script>

<style scoped lang="stylus">

.category
  .img-wrapper
    width 100%
    height 200px

    img
      width 100%
      height 100%

  .category-btn-wrapper
    display flex
    flex-wrap wrap
    justify-content center

    .btn
      height 22px
      padding 0 6px
      margin 5px 10px
      line-height 22px
      border 1px solid #ff0036
      border-radius 30px
      color #ff0036

    .active
      background-color #ff3306
      color #fff

  .content-wrapper
    margin-top 20px

    .item
      display flex
      width 100%
      height 70px
      padding 4px 0
      border-bottom 1px dotted #2d3a4b

      .left
        width 90px
        height 70px

        img
          width 90px
          height 70px

      .right
        display flex
        flex-wrap wrap
        align-content space-between
        box-sizing border-box
        padding-left 15px
        padding-bottom 15px
        //.title
        // font-size 15px
        .text-wrapper
          //margin-bottom  50px
          margin-left 90px

//display flex
//justify-content flex-end
</style>
